<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>董天启css</title>
    <style>
        
        a{
            text-decoration: none;
            
        }
        .one p{
            color: green;
            font-size: 15px;

        }
        .two > h1{
            color: red;
            font-size: 15px;
        }
        hr + p{
            
            color: red;
        }
        .two p{
            font-size: 12px;
        }
        .three h1{
            font-size: 20px;
        }
        .three p{
            font-size: 16;
        }
        #yw{
            color: royalblue;
        }
        .text{
            color: seagreen;
        }
        .four .head{
            font-size: 18px;

             height: 35px;
            
            background-color: #0f7cbf;
        }
        .head a{
            margin-left: 20px;
            color: white;
            line-height: 35px;
         
        }
        .four{
            width: 250px;
            padding: 10px;
        }
        .four p{
            margin: 0px;
            padding: 0px;
        }
        .four .one{
            font-size: 14px;

             height: 30px;
            
            background-color: #e4f1fa;
        }
        .one a{
            margin-left: 25px;
            color: #0f7cbf;
            line-height: 30px;
         
        }
        .head:hover,.one:hover{
            text-decoration:underline;
        }
        .first p{
           height: 20px;

        }
        .first a{
            font-size: 12px;
            line-height: 20px;
            color: #666666;
            margin: 5px 10px;
        }
    </style>
</head>
<body>
<div class="one">
    <h1>黄鹤楼</h1>
    <p>昔人已乘黄鹤去，此地空余黄鹤楼。</p>
    <p>黄鹤一去不复返，白云千载空悠悠</p>
    <p>晴川历历汉阳树，芳草萋萋鹦鹉洲。</p>
    <p>日暮乡关何处是？烟波江上使人愁。</p>
</div>
<div class="two">
<h1>水调歌头</h1>
<hr>
<p>
    明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
</p>
<p>
    转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>

</div>
    

<div class="three">
<h1 >如梦令</h1>
<hr>
<p class="text">昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否？应是绿肥红瘦。</p>
<h2 id="yw">译文</h2>
<p class="text">昨夜雨虽然下得稀疏，但是风却劲吹不停，虽然睡了一夜，仍有余醉未消。问那正在卷帘的侍女，外面的情况如何，她说海棠花依然和昨天一样。知道吗？知道吗？这个时节应该是绿叶繁茂，红花凋零了。</p>

</div>

<div class="four">
<p class="head"><a href="#">家用电器</a></p>

<p class="one"><a href="#">大家电</a></p>
<p class="first">
    <a href="#">平板电视</a>
    <a href="#">洗衣机</a>
    <a href="#">冰箱</a>
    <a href="#">空调</a>
    <a href="#">烟机/炉具</a>
    
</p>
<p class="one"><a href="#">生活电器</a></p>
<p class="first">
    <a href="#">平板电视</a>
    <a href="#">洗衣机</a>
    <a href="#">冰箱</a>
    <a href="#">空调</a>
    <a href="#">烟机/炉具</a>
    
</p>

<p class="one"><a href="#">厨房电器</a></p>
<p class="first">
    <a href="#">平板电视</a>
    <a href="#">洗衣机</a>
    <a href="#">冰箱</a>
    <a href="#">空调</a>
    <a href="#">烟机/炉具</a>
    
</p>
<p class="one"><a href="#">五金家装</a></p>
<p class="first">
    <a href="#">平板电视</a>
    <a href="#">洗衣机</a>
    <a href="#">冰箱</a>
    <a href="#">空调</a>
    <a href="#">烟机/炉具</a>
    
</p>
</div>
</body>
<ml>